import React, { useEffect, useState } from "react";
import './input.css'

export default function DialogInput({ defaultValue, onInputChanged, ...rest }) {
    // 当前 对话框编辑内容
    const [curInput, setCurInput] = useState("")

    useEffect(() => {
        setCurInput(defaultValue || "");
    }, [])

    const onHandleInputChanged = (v) => {
        onInputChanged && onInputChanged(v);
    };

    return (
        <div className="inputContent">
            <div className="ipnutValueContent">
                <div className="inputEditBackground">
                    <input
                        className="inputValue"
                        value={curInput}
                        onChange={(v) => {
                            let text = v.target.value;
                            setCurInput(t => { return text; });
                            onHandleInputChanged(text);
                        }}
                        {...rest} />
                </div>
            </div>
        </div>
    )
}